<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16.1.DOM-事件高级-注册事件</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>attachEvent（没法用，知道就行）</button>
    <script>
        // 1.传统注册  唯一性 后一个覆盖了前一个
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            alert('hi');
        }
        btns[0].onclick = function () {
            alert('hihi');
        }
        // 2.事件监听注册事件 addEventListener
        // （1）里面的事件类型是字符串，必定加岁引号'', 而且不带on
        // （2）同一个元素同一个事件可以添加多个监听器（事件处理程序）
        btns[1].addEventListener('click', function () {
            alert('22');
        })
        btns[1].addEventListener('click', function () {
            alert('33');
        })

        // 3.attachEvent()（了解）IE9之前 该特性非标准，尽量不要生产环境中使用
        // btns[2].attachEvent('onclick', function () {
        //     alert('IE9之前，尽量不要用此方法');
        // })
    </script>
</body>

</html>